<template>
  <div class="head">
    <div class="logo">
      <img src="static/image/logo.png" />
      <div class="title">豆子OA管理系统</div>
      <div class="divide-line"></div>
      <div class="subtitle">正直诚信 实事求是 卓越创新 成就客户</div>
    </div>
    <div class="other">
      <div
        style="padding:10px;cursor: pointer;"
        @click="()=>{ this.$router.push({path:'/system',query:{flag:32}}) }"
      >意见反馈</div>
      <div class="item" style="width:150px;">
        <i class="icon iconfont icon-user"></i>
        <span>您好！{{user.name}}</span>
      </div>
      <div class="item" @click="changePws">
        <span>修改密码</span>
      </div>
      <div class="item" @click="logout">
        <span>退出登录</span>
      </div>
    </div>
    <!-- 密码修改 -->
    <el-dialog
      title="密码修改"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="dialogStation"
      width="600px"
      center
    >
      <el-form
        status-icon
        ref="form"
        :model="form"
        label-width="120px"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="oldPwd">
          <el-input type="password" v-model.trim="form.oldPwd" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input type="password" v-model.trim="form.password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newPwd">
          <el-input type="password" v-model.trim="form.newPwd" placeholder="请确认新密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="close('form')">取消</el-button>
        <el-button type="primary" @click="save('form')" :loading="loading">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Logout, setPassWord } from "@/service/Api.js";
import md5 from "js-md5";
export default {
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("userInfo")),
      form: {
        oldPwd: "",
        password: "",
        newPwd: "",
      },
      rules: {
        oldPwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        newPwd: [{ required: true, message: "请确认新密码", trigger: "blur" }],
      },
      dialogStation: false,
      loading: false,
    };
  },
  methods: {
    changePws() {
      this.dialogStation = true;
    },
    logout() {
      this.$confirm("是否确定退出登录？", "提示", {
        type: "warning",
        center: true,
      })
        .then((_) => {
          Logout().then((res) => {
            if (res.code == 0) {
              sessionStorage.clear();
              this.$router.push({ path: "/" });
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch((_) => {});
    },
    //确认-提交
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let data = {
            oldPwd: md5(this.form.oldPwd),
            password: md5(this.form.password),
            newPwd: md5(this.form.newPwd),
          };
          setPassWord(data).then((res) => {
            console.log(res);
            this.loading = false;
            if (res.code == 0) {
              this.close("form");
              this.quit();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    quit() {
      Logout().then((res) => {
        if (res.code == 0) {
          sessionStorage.clear();
          this.$router.push({ path: "/" });
          this.$message.success("请重新登录！");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    close(formName) {
      this.dialogStation = false;
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.head {
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
}
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  width: 35px;
}
.logo .title {
  margin-left: 10px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.head i {
  font-size: 20px;
  color: #a1a1bb;
}

.other {
  display: flex;
  height: 100%;
  align-items: center;
}
.other .item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 80px;
  cursor: pointer;
  color: rgba(51, 51, 51, 1);
}
.other .item:first-child {
  width: 180px;
}
.other .item span {
  font-size: 14px;
  font-family: Microsoft YaHei;
}
.other .item:first-child span {
  padding-left: 10px;
}

.divide-line {
  width: 1px;
  height: 30px;
  background: rgba(221, 221, 221, 1);
  margin: auto 20px;
}

.subtitle {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(144, 147, 153, 1);
}
</style>

